<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Proxy</title>
	</head>
	<body>
		<div id="app">
			hello
		</div>
	</body>
	<script>
		// 模拟Vue中的data选项
		let data = {
			msg: 'hello',
			count:0
		}
		// 模拟Vue的实例
		let vm = new Proxy(data, {
			// 执行代理行为的函数
			// 当访问vm的成员时会执行
			get(target,key){
				console.log('get,key:',key,target[key])
				return target[key]
			},
			// 当设置vm的成员时会执行
			set(target,key,newValue) {
				console.log('set,key:',key.newValue)
				if(target[key] === newValue){
					return
				}
				target[key] = newValue
				document.querySelector('#app').textContent = target[key]
			}
		})
		
		// 测试
		vm.msg = 'hello world'
		console.log(vm.msg)
	</script>
</html>
